<template>
	<view class="content">
		<view class="numberdisplay">
			<view>
				<text id="nextmoney">{{next}}</text>
			</view>
			<canvas class="canvasprogress" canvas-id="circlepercentage"></canvas>
		</view>
		<view>
			<text>本月总生活费 {{total}}，剩余 {{current}}</text>
		</view>
		<view v-if="warnlevel > 0">
			<image style="width: 24px; height: 24px; float: left;"  src="../../../static/img/warn.png"></image>
			<text class="warnmsg">{{warnmsg}}</text>
		</view>
		
			<button style="margin-top: 20px;" type="primary" v-on:click="toRecord">记录消费</button>
		
	</view>
</template>

<script>
	var NC = require("../../../common/common.js");
	
	//#region DrawAnim
	let ctx = null;
	let interval = null;
	function drawPercentage(_cg,width,height,donecolor,undonecolor,progress){
	    var cg=_cg;
		cg.save();
		
	    cg.clearRect(0,0,width,height);
	    cg.translate(width/2,height/2);
	    var step = Math.PI * 2 / 100;
	    for (let i = 0; i < 100; i++) {
	        if(i<progress){
	            cg.setFillStyle(donecolor);
	        }
	        else{
	            cg.setFillStyle(undonecolor);
	        }
	        var barWidth = width / 100;
	        var barHeight = width / 20;
	        cg.fillRect(-barWidth / 2 ,-height/2,barWidth,barHeight)
	        cg.rotate(step);
	    }
	    cg.restore();
		cg.draw();
	}

	var canvas_progress_count = 0;
	var canvas_progress_target =0;

	var canvas_anim = function(){
	    drawPercentage(ctx,220,220,"#47f","#ddf",canvas_progress_count);
	    canvas_progress_count++;
	    if(canvas_progress_count<=canvas_progress_target){
	        interval = setTimeout(canvas_anim,16);
	    }
	}
	//#endregion
	export default {
		comments:{
			
		},
		data() {
			return {
				total:0,
				current:0,
				warnlevel:0,
				next:0,
				warnmsg:""
			}
		},
		onShow() {
			canvas_progress_count=0;
			NC.NextCalc.loadState();
			canvas_progress_target = 100 - Math.round( NC.NextCalc.getAvailableAmount() /NC.NextCalc.totalAmount  * 100);
			this.startAnimation();
			this.total = NC.NextCalc.formatNumber(NC.NextCalc.getTotalAmount());
			this.current = NC.NextCalc.formatNumber(NC.NextCalc.getAvailableAmount());
			this.warnlevel = NC.NextCalc.getWarnLevel();
			this.next = NC.NextCalc.formatNumber(NC.NextCalc.computeNext());
			if(this.warnlevel>0){
				this.warnmsg="本月预算已超支，可能会在月末之前耗尽，请调整支出。";
				if(this.warnlevel>1){
					this.warnmsg="您没钱了。";
				}
			}
		},
		
		onLoad() {
			
		},
		onUnload() {
			clearTimeout(interval);
		},
		methods: {
			startAnimation:function(){
				if(ctx==null){
					ctx = uni.createCanvasContext("circlepercentage");
				}
				drawPercentage(ctx,220,220,"#47f","#ddf",canvas_progress_count);
				interval =  setTimeout(canvas_anim,200);
			},
			toRecord:function(){
				uni.navigateTo({
					url:"../consume/consume"
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.numberdisplay{
		width: 100vw;
		height: 66vh;
	}
	
	#nextmoney
	{
	    font-size: 50px;
	    color: black;
	    position: absolute;
	    left: 50%;    
	    top:40%;     
	    transform:translate(-50%,-50%);
	}
	.canvasprogress{
		width: 220px;
		height: 220px;
	    position: absolute;
	    left: calc(50% - 110px);
	    top: calc(40% - 110px);
	}
	.warnmsg{
		color: #f70;
		line-height: 24px;
		font-size: 12px;
		height: 24px;
		display: inline-block;
	}
</style>
